<!doctype html>
<html>
<!-- Last updated:2020/02/22 -->
<head>
  <title>WebPicView - WebPicView.html</title>
  <meta charset="UTF-8">
  <meta name="Author" content="setycyas">
  <link rel="stylesheet" href="/static/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="/static/common_style.css" type="text/css" />
  <!--common_style.css是自定义的基本模板页css,每个应用还应该自定义一个css-->
  <script src="/static/jquery.min.js"></script>
  <!--<script src="bootstrap.min.js"></script>-->
  <script src="/static/poster.js"></script>
  <script>
    
    // 发送检索请求,然后根据结果重置$('#searchResult')的post发射器
    var searchPoster = new SimplePoster(
      'WebPicView',
      'search',
      (respData) => {
        console.log('检索返回:', respData);
        $('#searchResult').html('');
        var html = '';
        for (url in respData['result']){
          name = respData['result'][url];
          optionHtml = '<option value='+url+'>'+name+'</option>';
          html += optionHtml;
        }
        $('#searchResult').html(html)
      }
    );
    
    /* 点击检索按钮 */
    function searchBtnClick(){
      // 制作上传到后段的数据
      data = {
        'type': $('#type').val().trim(),
        'tags': $('#tag').val().join(','),
        'days': $('#days').val().trim()
      };
      /* post下载命令,开启线程监视器 */
      searchPoster.post(data);
      console.log('发送检索:',data);
    }
    
    /* 选择一条图片记录 */
    function select(){
      $('#picUrl').attr('href', $('#searchResult').val());
      $('#picUrl').html($('#searchResult').val());
      $('#img').attr('src', $('#searchResult').val());
    }
       
  </script>
</head>

<body>

<div class="myBlock container" style="float:left;max-width:300px;">

  <label class="control-label">选择分类:</label>
  <select id="type" class="form-control" style="width:200px;border:1px solid green">
    {% for type in types %}
      <option value="{{type}}">{{type}}</option>
    {% endfor %}
  </select>
  <label class="control-label">选择标签(可多选):</label>
  <select id="tag" class="form-control" style="width:200px;border:1px solid green" multiple="multiple" size="5">
    {% for tag in tags %}
      <option value="{{tag}}">{{tag}}</option>
    {% endfor %}
  </select>
  <label class="control-label">选择日期:</label>
  <select id="days" class="form-control" style="width:200px;border:1px solid green">
    {% for dayString,dayValue in days %}
      <option value="{{dayValue}}">{{dayString}}</option>
    {% endfor %}
  </select>
  <br/>
  <input id="searchBtn" class='btn btn-primary' type="button" value="检索" 
    onclick="searchBtnClick();" /><br/>
  <label class="control-label">检索结果:</label>
  <select id="searchResult" class="form-control" style="width:200px;border:1px solid green;" size="10" onclick="select();">
  </select>

</div>

<div class="myBlock container" style="float:left;max-width:600px;">
  <a id="picUrl" href="" target="_blank">
    这里显示图片链接</a><br/><br/>
  <img id="img" src="" style="max-width:600px;max-heigth:100px;"/>

</div>

</body>

</html>